<template>
  <h1 v-text="realName"></h1>
  <h1 v-text="msg"></h1>
  <h1 v-text="empSlogan"></h1>
  <button @click="updateRealName">mutations</button>
  <button @click="updateName">actions</button>
</template>
<script setup>
import {useStore} from "vuex";
import {computed, ref} from "vue";

const store = useStore();
console.log(store);
const realName = ref(computed(function () {
  return store.state.emp.realName;
}));
const msg = ref(computed(function () {
  return store.getters['emp/empMsg'];
}));
const empSlogan = ref(computed(function () {
  return store.getters['emp/empSLogan'];
}));
const updateRealName = () => {
  store.commit({
    type: 'emp/updateRealName',
    realName: '李胜龙'
  });
};
const updateName = () => {
  store.dispatch({
    type: 'emp/updateName',
    realName: '李胜龙'
  });
};
</script>
<script>
export default {
  name: "LhzD"
}
</script>

<style scoped>

</style>